<template>
  <div id="shopping">
    <el-col class="card" v-for="(item, index) in goodsList" :key="index" :offset="index > 0 ? 2 : 0">
      <el-card shadow="hover" :body-style="{ padding: '0px' }" @click.native="toDetail(item.goodsId)">
        <img :src="BASE_URL + item.goodsImage" class="image" :alt="item.goodsName">
        <div class="title"><span>{{item.goodsName}}</span></div>
      </el-card>
    </el-col>
    <!-- https://juejin.cn/post/7156154491044102151 Infinite Scroll 无限滚动 -->
  </div>
</template>

<script>
import { listGoods } from "@/api/shopping/goods";

export default {
  name: 'shopping',
  created() {
    this.getGoodsList();
  },
  data() {
    return {
      BASE_URL: "https://0w0-0v0.s3.ap-northeast-2.amazonaws.com/images/goods/",
      goodsList: []
    };
  },
  methods: {
    /** 查询商品列表 */
    getGoodsList() {
      this.loading = true;
      listGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        goodsId: null,
        sellerId: null,
        goodsName: null,
        typeId: null
      };
      // this.sellerList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getGoodsList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    toDetail(goodsId) {
      this.$router.push({name: 'goodsDetail', params: {'goodsId': goodsId}});
    }
  }

}
</script>

<style lang="scss" scoped>
#shopping {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  width: 220px;
  margin: 20px;
  cursor: pointer;

  img {
    width: 100%;
    height: 200px;
    display: block;
    object-fit: cover;
    transition: all .5s cubic-bezier(0.09, 0.68, 0.58, 1);
    filter:  blur(1px) grayscale(30%);
  }
  img:hover {
    scale: 1.1;
    filter:  blur(0) grayscale(0%);
    transition: all .3s cubic-bezier(0.09, 0.68, 0.58, 1);
  }

  img:focus {
    scale: .95;
  }
}

.title {
  max-height: 100px;
  line-height: 60px;
  text-align: center;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
